<template>
  <div class="recommend-lists">
    <mt-loadmore :top-method="loadTop"
                 @top-status-change="handleTopChange"
                 :bottom-method="loadBottom"
                 @bottom-status-change="handleBottomChange"
                 :bottom-all-loaded="allLoaded"
                 ref="loadmore">
      <ul class="lists-ul" >
        <li v-for="(item,index) in listData" :key=index @click="entryDetailIndex(item)" id="div">
          <div class="recommend-content">
            <h2 class="list-title">{{item.title}}</h2>
            <img class="list-img" src="../assets/dodo.jpg" alt="">
            <!--正文内容-->
            <div class="list-txt">
              {{item.content}}
            </div>
            <!--底部tips-->
            <div class="list-tips">
              <em>{{item.approvalTxt}}</em>赞同 <i class="iconfont dot"></i> <em>{{item.comment}}</em>评论
              <i class="iconfont ellipsis" @click="popupClick(index)"></i>
            </div>
          </div>

          <!--屏蔽按钮显示内容-->
          <div class="shield-list">
            <div class="shield-title">
              <h2>已屏蔽此条。还不想看见哪些？</h2>
              <span @click="repealBtn(index)">撤销</span>
            </div>
            <ul class="shield-ul">
              <li v-for="(reason,indexR) in item.blockingReason" :key="indexR">
                {{reason.reason}}
              </li>
            </ul>
          </div>

          <!--点击列表三点的弹窗-->
          <div class="shield-popup">
            <mt-popup
              v-model="popupVisible"
              popup-transition="popup-fade"
              closeOnClickModal="true"
              position="right">
              <span class="shield-article" @click="shieldOperate()">屏蔽这篇文章</span><br>
              <span>举报</span>
            </mt-popup>
          </div>
        </li>
      </ul>
      <!--上拉 下拉-->
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">下拉刷新</span>
        <span v-show="topStatus === 'loading'">Loading...</span>
      </div>
      <div slot="bottom" class="mint-loadmore-bottom">
        <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">上拉加载</span>
        <span v-show="bottomStatus === 'loading'"></span>
      </div>
    </mt-loadmore>





  </div>
</template>

<script>
  export default {
    name: 'Recommend',
    data() {
      return {
        popupVisible: false,
        shieldVisible: false,
        listsVisible: true,
        id: '111',
        index: 0,
        listData: [],
        allLoaded: false,
        topStatus: '',
        bottomStatus: '',
        courrentPage: 0,
        arr: [],
        i:0,
      }


    },
    methods: {
      //获取列表数据
      InitListData() {
        let vm = this
        vm.$axios.get('/recommend/list').then(response => {
          if (response.status == 200) {
            vm.listData = response.data.items
          }
        });
      },
      //三点按钮
      popupClick(index) {
        let vm = this
        vm.index = index
        vm.popupVisible = true
      },
      //屏蔽操作
      shieldOperate() {
        let vm = this
        vm.popupVisible = false
        vm.$$(".recommend-content").eq(vm.index).css("display", "none")
        vm.$$(".shield-list").eq(vm.index).css("display", "block")

      },
      //  撤销操作
      repealBtn(index) {
        let vm = this
        vm.shieldVisible = false
        vm.$$(".recommend-content").eq(index).css("display", "block")
        vm.$$(".shield-list").eq(index).css("display", "none")
        vm.popupVisible=true
        // vm.listsVisible = true
      },
      //  进入详情页面
      entryDetailIndex(val) {
        let vm = this
        //进入详情页面，并传详情页面需要的值
        if (!vm.popupVisible) {
          vm.$router.push({
            path: '/ListsDetail/' + vm.id,
            query: {title: val.title, content: val.content, approvalTxt: ""}
          })
        }
      },
      //  下拉刷新
      loadTop() {
        let vm = this
        vm.loadFrist()
      },

      loadFrist() {
        let vm = this
        vm.$axios.get('/recommend/list').then(response => {
          this.courrentPage = 0;
          this.allLoaded = false; // 可以进行上拉
          vm.arr = response.data.items
          vm.arr.forEach(a => {
            vm.listData.unshift(a);
          })
          vm.$refs.loadmore.onTopLoaded();
        }).catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
      },
      //  上拉加载
      loadBottom() {
        let vm = this
        vm.loadMore()
      },
      loadMore() {
        let vm = this
        console.log(333)
        vm.$axios.get("/recommend/list").then(response => {
          // concat数组的追加
          vm.listData = vm.listData.concat(response.data.items);
          vm.courrentPage++;

          if (vm.courrentPage > 2) { //下拉加载3次就不会再执行了
            vm.allLoaded = true; // 若数据已全部获取完毕  被指定为 bottom-method 的方法就不会执行
          }

          vm.$refs.loadmore.onBottomLoaded();
        }).catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
      },
      //组件顶部状态发生变化时的回调函数
      handleTopChange(status) {
        let vm = this
        console.log('top',status)
        vm.topStatus = status
      },
      //  组件底部状态发生变化时的回调函数
      handleBottomChange(status) {
        let vm = this
        console.log('bottom',status)
        vm.bottomStatus = status
      },
      handleScroll() {
        let vm = this
        // 页面滚动距顶部距离
        let scrollTop = document.documentElement.scrollTop || window.pageYOffset ||  document.body.scrollTop //通过这句赋值就能在任何情况下获得scrollTop 值
        let scroll = scrollTop - vm.i;
        vm.i = scrollTop;
        if (scroll < 0) {
          vm.$bus.$emit('footerVisible',true)//
          // console.log('up')
        } else {
          vm.$bus.$emit('footerVisible',false)
          // console.log('down')
        }
      }

    },
    computed: {},
    created() {
      const vm = this
      vm.InitListData()
    },
    mounted(){
      window.addEventListener('scroll',this.handleScroll,true);//监听（绑定）滚轮滚动事件

    }
  }
</script>

<style scoped="scoped">
  .mint-loadmore-top span .is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
</style>
